<template>
  <div class="bj_tpTitle">
    <img src="../../img/student/bj_tp@2x.png" class="bj_tp"/>
    <div class="bj_tpTitlepade">
      <div class="bj_tpTitlepadediv">查看作业</div>
      <div class="bj_tpTitlepadeName">作业用于学习展示,请认真填写</div>
    </div>
  </div>
  <div class="schoolAssignmentCenter">
    <div class="schoolAssignmentTitle">谁谁谁的作业</div>
    <div class="schoolAssignmentFu">视频文件</div>
    <div class="player">
      <video-player v-if="showVideoPlay"
                    class="vjs-custom-skin"
                    :options="playerOptions"
                    ref="videoPlayer"
                    @ready="onPlayerReady"
                    @play="onPlayerPlay($event)"
                    @pause="onPlayerPause($event)"
                    @ended="onPlayerEnd($event)"
                    @waiting="onPlayerWaiting($event)"
                    @playing="onPlayerPlaying($event)"
                    @loadeddata="onPlayerLoadeddata($event)"
                    @timeupdate="onPlayerTimeupdate($event)"
                    @statechanged="playerStateChanged($event)"
      ></video-player>
    </div>
    <div class="schoolAssignmentFu">图片文件</div>
    <div style="width: 343px;height: 123px;background: #B8B8B8;border-radius: 6px;margin: 0 auto">
    </div>
  </div>
  <div class="viewIng">
    <div class="viewIngCenter">
      <img src="../../img/teacher/yx.png" class="yx"/>
      <img src="../../img/teacher/dp.png" class="dp" @click="show = true"/>
    </div>
  </div>

  <!--  点评弹框-->
  <van-action-sheet v-model:show="show" title="老师点评">
    <div class="content">
      <div class="contentTitle">音频上传</div>

      <div>
        <div class="inner">
          <el-button type="primary" @click="handleStart" class="innerbuttom">开始录音</el-button>
<!--          <el-button type="info" @click="handlePause">暂停录音</el-button>-->
<!--          <el-button type="success" @click="handleResume">继续录音</el-button>-->
<!--          <el-button type="warning" @click="handleStop">停止录音</el-button>-->
        </div>
        <div class="innerCenter">
          <div>总评分</div>
          <van-rate v-model="value" :count="3" color="#FFB500"/>
        </div>
        <div class="heightCenter"></div>
        <div class="contentTitle" style="margin-bottom: 12px">点评内容</div>
        <div class="courseheightBottom">
        <textarea
          id="textArea"
          v-model="text"
          :maxlength="maxLength"
          placeholder="请输入内容"
          rows="5"
          cols="30"
        ></textarea>
        <p >{{ remainingCharacters }}/300</p>

        </div>
        <div class="contentTitleinner">
          <div class="contentTitleBottom">图片上传0/5</div>
          <van-uploader v-model="fileList" multiple />
        </div>
        <img src="../../img/teacher/button_tjdp@2x.png" class="button_tjdp"/>
<!--        <div style="font-size:14px">-->
<!--          <h3>录音时长：{{ recorder && recorder.duration.toFixed(4) }}</h3>-->
<!--          <br/>-->
<!--          <el-button type="primary" @click="handleStart">开始录音</el-button>-->
<!--          <el-button type="info" @click="handlePause">暂停录音</el-button>-->
<!--          <el-button type="success" @click="handleResume">继续录音</el-button>-->
<!--          <el-button type="warning" @click="handleStop">停止录音</el-button>-->
<!--          <br/>-->
<!--          <br/>-->
<!--          <h3>-->
<!--            播放时长：{{-->
<!--              recorder &&-->
<!--              (playTime > recorder.duration-->
<!--                ? recorder.duration.toFixed(4)-->
<!--                : playTime.toFixed(4))-->
<!--            }}-->
<!--          </h3>-->
<!--          <br/>-->
<!--          <el-button type="primary" @click="handlePlay">播放录音</el-button>-->
<!--          <el-button type="info" @click="handlePausePlay">暂停播放</el-button>-->
<!--          <el-button type="success" @click="handleResumePlay">继续播放</el-button>-->
<!--          <el-button type="warning" @click="handleStopPlay">停止播放</el-button>-->
<!--          <el-button type="error" @click="handleDestroy">销毁录音</el-button>-->
<!--          <el-button type="primary" @click="uploadRecord">上传</el-button>-->
<!--        </div>-->

      </div>
    </div>
  </van-action-sheet>
</template>

<script>
import Recorder from 'js-audio-recorder'

export default {
  setup() {
    const show = ref(false);
    const value = ref(1);
    const fileList = ref([]);
    return {
      show,
      value,
      fileList,
    };
  },
  data() {
    return {
      recorder: null,
      playTime: 0,
      timer: null,
      src: null,

      text: '', // 绑定的文本
      maxLength: 200, // 最大字数限制


      videoList: [], //upload绑定的数组
      videoUrls: [], // 存储多个视频的URL
      thumbnailUrls: [], // 存储多个视频的缩略图URL
      showVideoPlay: true,
      currentVideoUrl: "", // 当前播放的视频URL
      isPlaying: false,
      currentTime: 0,
      maxTime: 0,
      playerOptions: {
        height: "200px",
        width: "100%",
        playbackRates: [1.0, 2.0], // 可选的播放速度
        autoplay: true,  // 是否自动播放
        controls: true,   // 是否显示控制条
        muted: false, // 默认情况下静音播放
        loop: false, // 是否视频一结束就重新开始
        sources: [
          {
            type: "video/mp4",
            src: ""  // 视频源地址
          }
        ],
        controlBar: {
          currentTimeDisplay: true,
          progressControl: true,  // 是否显示进度条
          playbackRateMenuButton: true, // 是否显示调整播放倍速按钮
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: true, // 是否显示剩余时间功能
          fullscreenToggle: true, // 是否显示全屏按钮
        },
        poster: "https://your-poster-image.jpg",  // 视频封面
        notSupportedMessage: '此视频暂无法播放，请稍后再试。'  // 不支持播放的消息
        // 其他配置选项...
      }
    };
  },
  created() {
    this.recorder = new Recorder()
  },
  computed: {
    remainingCharacters() {
      return this.text.length;
    },
  },
  methods: {
    // 准备好了
    onPlayerReady() {
      console.log("准备好了");
    },
    // 视频播放
    onPlayerPlay(player) {
      console.log('播放了');
      console.log(player);
      let playTime = 0;
      if (
        Number(Math.floor(this.playedTime)) ===
        Number(Math.floor(player.duration()))
      ) {
        this.playedTime = 0;
        playTime = 0;
      } else if (
        Number(Math.floor(player.currentTime())) !==
        Number(Math.floor(this.playedTime))
      ) {
        playTime = this.playedTime;
        player.currentTime(playTime)
      }
    },
    // 视频暂停的
    onPlayerPause(player) {
      console.log('暂停中');
      console.log(player);
      this.playedTime = player.currentTime();
    },
    // 视频播放完
    onPlayerEnd(player) {
      console.log('播放结束了');
      console.log(player);
    },
    // DOM元素上的readyState更改导致播放停止
    onPlayerWaiting(player) {
      console.log("播放停止中");
      console.log(player);
    },
    // 视频已开始播放
    onPlayerPlaying(player) {
      console.log("开始播放了");
      console.log(player);
    },
    // 当播放器在当前播放位置下载数据时触发
    onPlayerLoadeddata(player) {
      console.log("开始下载数据");
      console.log(player);
    },
    // 当前播放位置发生变化时触发
    onPlayerTimeupdate(player) {
      console.log("播放位置变化了");
      console.log(player);
      let timeDisplay = player.currentTime();
      if (timeDisplay - this.currentTime > 1) {
        player.currentTime(this.currentTime > this.maxTime ? this.currentTime : this.maxTime);
      }
      this.currentTime = player.currentTime();
      this.maxTime = this.currentTime > this.maxTime ? this.currentTime : this.maxTime;
    },
    //播放状态改变
    playerStateChanged(playerCurrentState) {
      console.log("播放状态变化了");
      console.log(playerCurrentState);
    },
    // 手动暂停视频的播放
    pause() {
      // 视频播放器的方法调用，要使用this.$refs.videoPlayer.player这个对象去调用
      this.$refs.videoPlayer.player.pause()
    },





    // 开始录音
    handleStart() {
      this.recorder = new Recorder()
      Recorder.getPermission().then(() => {
        console.log('开始录音')
        this.recorder.start() // 开始录音
      }, (error) => {
        // this.$message({
        //   message: '请先允许该网页使用麦克风',
        //   type: 'info'
        // })
        console.log(`${error.name} : ${error.message}`)
      })
    },
    handlePause() {
      console.log('暂停录音')
      this.recorder.pause() // 暂停录音
    },
    handleResume() {
      console.log('恢复录音')
      this.recorder.resume() // 恢复录音
    },
    handleStop() {
      console.log('停止录音')
      this.recorder.stop() // 停止录音
    },
    handlePlay() {
      console.log('播放录音')
      console.log(this.recorder)
      this.recorder.play() // 播放录音

      // 播放时长
      this.timer = setInterval(() => {
        try {
          this.playTime = this.recorder.getPlayTime()
        } catch (error) {
          this.timer = null
        }
      }, 100)
    },
    handlePausePlay() {
      console.log('暂停播放')
      this.recorder.pausePlay() // 暂停播放

      // 播放时长
      this.playTime = this.recorder.getPlayTime()
      this.time = null
    },
    handleResumePlay() {
      console.log('恢复播放')
      this.recorder.resumePlay() // 恢复播放

      // 播放时长
      this.timer = setInterval(() => {
        try {
          this.playTime = this.recorder.getPlayTime()
        } catch (error) {
          this.timer = null
        }
      }, 100)
    },
    handleStopPlay() {
      console.log('停止播放')
      this.recorder.stopPlay() // 停止播放

      // 播放时长
      this.playTime = this.recorder.getPlayTime()
      this.timer = null
    },
    handleDestroy() {
      console.log('销毁实例')
      this.recorder.destroy() // 毁实例
      this.timer = null
    },
    uploadRecord() {
      if (this.recorder == null || this.recorder.duration === 0) {
        this.$message({
          message: '请先录音',
          type: 'error'
        })
        return false
      }
      this.recorder.pause() // 暂停录音
      this.timer = null
      console.log('上传录音')// 上传录音

      const formData = new FormData()
      const blob = this.recorder.getWAVBlob()// 获取wav格式音频数据
      // 此处获取到blob对象后需要设置fileName满足当前项目上传需求，其它项目可直接传把blob作为file塞入formData
      const newbolb = new Blob([blob], { type: 'audio/wav' })
      const fileOfBlob = new File([newbolb], new Date().getTime() + '.wav')
      formData.append('file', fileOfBlob)
      const url = window.URL.createObjectURL(fileOfBlob)
      this.src = url
      // const axios = require('axios')
      // axios.post(url, formData).then(res => {
      //   console.log(res.data.data[0].url)
      // })
    }
  }
}
</script>

<style scoped>
.bj_tpTitle {
  position: relative;
  z-index: -1;
}

.bj_tp {
  width: 100%;
}

.bj_tpTitlepade {
  position: absolute;
  top: 17px;
  left: 20px;
}

.bj_tpTitlepadediv {
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 18px;
  color: #FFFFFF;
  line-height: 25px;
  text-align: left;
  font-style: normal;
}

.bj_tpTitlepadeName {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 17px;
  text-align: left;
  font-style: normal;
}

.schoolAssignmentCenter {
  padding: 18px 0px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background: #fff;
  margin-top: -24px;
  z-index: 10;
}

.schoolAssignmentTitle {
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  font-size: 16px;
  color: #302E37;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  padding: 0 16px;
}

.schoolAssignmentFu {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #302E37;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  padding: 15px 16px 8px;
}

.schoolAssignmentfu {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #302E37;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  margin-top: 15px;
  margin-bottom: 8px;
}

.courseheightBottom {
  position: relative;

p {
  position: absolute;
  bottom: 8px;
  right: 24px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: rgba(48, 46, 55, 0.4);
  line-height: 16px;
  text-align: center;
  font-style: normal;
}

}
textarea {
  padding: 9px 12px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 13px;
  color: #999999;
  line-height: 18px;
  text-align: left;
  font-style: normal;
  /*width: 100%;*/
  margin: 0 16px;
  width: 91%;
  background: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #949494;
}

.vjs-custom-skin {
  width: 92%;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
}

.viewIng {
  width: 100%;
  position: fixed;
  bottom: 0px;
  left: 0px;
  padding: 4px 15px;
  background: #FFFFFF;
  box-shadow: 0px -3px 5px 0px rgba(55, 46, 46, 0.05);

.viewIngCenter {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.yx {
  width: 151px;
  height: 41px;
}

.dp {
  width: 151px;
  height: 41px;
}

}

/*//点评样式*/
.content {
  /*padding: 16px 16px 160px;*/
}

.contentTitle {
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  font-size: 16px;
  color: #302E37;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  padding:12px 16px 0px;
}
.innerbuttom{
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  font-size: 0.42667rem;
  color: #fff;
  line-height: 0.58667rem;
  text-align: left;
  font-style: normal;
  padding: 2px 8px;
  background: #23acdf;
  border-radius: 10px;
  margin-top:14px;
}
.inner{
  margin-top:14px;
  padding:0 16px;
}
.innerCenter{
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #666666;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  display: flex;
  justify-content: space-between;
  margin-top: 23px;
  padding:0 16px 11px;
}
.heightCenter{
  width: 100%;
  height: 10px;
  background: #F4F6F9;
}
.courseheightBottom{
  position: relative;
p{
  position: absolute;
  bottom:8px;
  right: 24px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: rgba(48,46,55,0.4);
  line-height: 16px;
  text-align: center;
  font-style: normal;
}
}
.contentTitleBottom{
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #302E37;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  margin-bottom: 8px;
  margin-top: 16px;
}
.contentTitleinner{
  padding:0 16px;
}
.button_tjdp{
  width: 92%;
  margin: 15px auto 29px;
  display: block;
}
</style>
